<template>
  <div class="shopBannerWeappSet">
    <div style="padding:15px 15px 0 15px;">
      <div class="title">背景图片</div>
      <p class="deco-help-desc">
        建议尺寸：750x370 像素，尺寸不匹配时，图片将被压缩或拉伸以铺满画面
      </p>
      <div class="img-cover">
        <img class="banner-img" :src="config.background_image" alt="" />
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <span class="changeImg">更换图片</span>
        </el-upload>
      </div>
    </div>
    <el-divider></el-divider>
    <div>
      <div class="deco-control-group">
        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">显示样式</div>
            <div class="deco-control-group__value">
              {{ showStyles[config.store_info_style] }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-radio-group v-model="config.store_info_style" size="mini">
              <el-radio-button :label="0">
                <i class="el-icon-s-grid"></i>
              </el-radio-button>
              <el-radio-button :label="1">
                <i class="el-icon-s-grid"></i>
              </el-radio-button>
              <el-radio-button :label="2">
                <i class="el-icon-s-grid"></i>
              </el-radio-button>
              <el-radio-button :label="3">
                <i class="el-icon-s-grid"></i>
              </el-radio-button>
              <el-radio-button :label="4">
                <i class="el-icon-s-grid"></i>
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      showStyles: ['样式一', '样式二', '样式三', '样式四', '样式五'],
      config: this.value ? this.value : {}
    }
  },
  watch: {
    value(newVal) {
      this.config = newVal
    },
    config(newVal, oldVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.config.background_image = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="less">
@import './common.less';
.shopBannerWeappSet {
  .img-cover {
    position: relative;
    width: 60px;
    height: 60px;
    border: 1px solid #e5e5e5;
    text-align: center;
    background: #f2f4f6;
    .banner-img {
      width: 100%;
      height: 100%;
    }
    .changeImg {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #fff;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }
  }
}
</style>
